import React from 'react';

/*
  学习目标：子传父技术-实现Child组件，每次花钱8000
*/
export default class Parent extends React.Component {
  state = {
    money: 1000,
  };

  handleMakeMoney = () => {
    this.setState({
      money: 1000 + this.state.money,
    });
  };

  // 1. 父组件中定义一个函数
  handleCost = (number) => {
    // 4. 完成逻辑
    const { money } = this.state;
    console.log('number  ----->  ', number);
    this.setState({ money: money - number });
  };

  render() {
    const { money } = this.state;
    return (
      <div>
        <button onClick={this.handleMakeMoney}>爸爸开始赚钱了</button>
        {/* 2. 🔔父传子传一个回调函数 */}
        <Child money={money} handleCost={this.handleCost}></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    const { money, handleCost } = this.props;
    return (
      <div>
        <h1>家庭存款： {money} </h1>

        {/*  3. 🔔子组件调用回调函数，可以传参数 */}
        <button onClick={() => handleCost(8000)}>吞金兽向花钱</button>
      </div>
    );
  }
}
